<template>
    <div class="box">
        <!-- 控制容器 -->
        <div class="controls-container">
            <ul class="tab">
                <li
                    class="tab-item"
                    :class="{ 'controls-active': selectControlValue === 1 }"
                    @click="selectControls(1)"
                >
                    <div class="controls-text-box">
                        <img-icon name="castle" size="2rem" />
                        <span
                            class="controls-text"
                            v-if="selectControlValue === 1"
                        >
                            站点概览
                        </span>
                    </div>
                </li>
                <li
                    v-if="false"
                    class="tab-item"
                    @click="selectControls(2)"
                    :class="{ 'controls-active': selectControlValue === 2 }"
                >
                    <div class="controls-text-box">
                        <img-icon name="house" size="2rem" />
                        <span
                            class="controls-text"
                            v-if="selectControlValue === 2"
                        >
                            我的主页
                        </span>
                    </div>
                </li>
                <li
                    class="tab-item"
                    :class="{ 'controls-active': selectControlValue === 3 }"
                    @click="selectControls(3)"
                >
                    <div class="controls-text-box">
                        <img-icon name="catalog" size="2rem" />
                        <span
                            class="controls-text"
                            v-if="selectControlValue === 3"
                        >
                            目录
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- Profile section -->
        <div class="profile">
            <div class="avatar-box">
                <img :src="avatarUrl" alt="Avatar" class="avatar" />
            </div>
            <div class="nickname">{{ nickname }}</div>
            <div class="bio">{{ bio }}</div>
            <div class="statistics-box">
                <div class="article-item">
                    <div class="number">297</div>
                    <div class="title">文章</div>
                </div>
                <div class="classify-item">
                    <div class="number">56</div>
                    <div class="title">分类</div>
                </div>
                <div class="tag-item">
                    <div class="number">45</div>
                    <div class="title">标签</div>
                </div>
            </div>
            <div class="sidebar-menu">
                <ul class="sidebar-menu-navbar">
                    <li
                        class="align-center"
                        :class="{ active: item.name === activeName }"
                        v-for="item in navMsg"
                        :key="item.path"
                        @click="goPage(item.path, item.name)"
                    >
                        <img-icon :name="item.icon" size="1.5rem" class="mr" />
                        <div>
                            {{ item.name }}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { navMsg, menuList } from "@/assets/data/header";

import ImgIcon from "./ImgIcon.vue";
import _this from "node-notifier";
import { logout } from "@/api";

export default {
    name: "CustomSidebar",
    components: {
        ImgIcon,
    },
    data() {
        return {
            navMsg: [], // 导航栏
            menuList: [], // 用户下拉菜单
            selectControlValue: 1,
            activeName: '',
        };
    },
    created() {
        this.navMsg = navMsg;
        this.menuList = menuList;
    },
    props: {
        avatarUrl: String, // 头像 URL
        nickname: String, // 昵称
        bio: String, // 个性签名
    },
    methods: {
        /**
         * 选择展开的功能
         */
        selectControls(value) {
            this.selectControlValue = value;
            console.log("选择：" + value);
        },
        /**
         * 上方导航栏菜单点击处理
         */
        goPage(path, name) {
            this.activeName = name
            if (
                !this.loginIn &&
                (path === "/user-info" || path === "/setting")
            ) {
                this.notify("请先登录", "warning");
            } else {
                this.$store.commit("setActiveName", name);
                this.$router.push({ path: path });
                // 关闭侧边栏
                this.closeSidebar();
            }
        },
        goMenuList(path) {
            if (path === 0) {
                this.$store.commit("setLoginIn", false);
                this.$store.commit("setIsActive", false);
                logout()
                    .then((res) => {
                        _this.notify("退出登录成功", "success");
                    })
                    .catch((err) => {
                        _this.notify("退出登录失败", "error");
                    });
                this.$router.go(0);
            } else {
                this.$router.push({ path: path });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/sidebar.scss";
</style>
